<template>
    <el-dialog
        title="手工匹配交易流水信息"
        :visible.sync="dialogShow"
        :modal="false"
        fullscreen
        :before-close="handleClose"
    >
        <div style="color: red; padding-bottom: 10px">
            正在匹配信息：发票号码 {{ selectRow.fphm }}，第{{
                (selectRow.selfIndex || 0) + 1
            }}行，金额（不含税）{{ selectRow.je }}元，税额{{ selectRow.se }}元。
        </div>
        <el-form ref="form" :model="formObj" label-width="70px">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="获票人名称" label-width="80px">
                        <el-input
                            v-model="formObj.hprmc"
                            size="small"
                        ></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="10">
                    <el-form-item
                        label="保单号/保全号/定期结算号"
                        label-width="160px"
                    >
                        <el-input
                            v-model="formObj.ywbh"
                            size="small"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="0px">
                        <el-select
                            v-model="formObj.ywdhlx"
                            placeholder="请选择"
                            style="width: 120px; padding-left: 5px"
                            size="small"
                        >
                            <el-option label="投保单号" value="1"></el-option>
                            <el-option label="汇交单号" value="2"></el-option>
                            <el-option
                                label="学平险受理号"
                                value="3"
                            ></el-option>
                        </el-select>
                        <el-input
                            style="width: calc(100% - 130px); padding-left: 4px"
                            size="small"
                            v-model="formObj.tbdh"
                            placeholder="请输入"
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="险种代码" label-width="80px">
                        <el-input
                            v-model="formObj.xzdm"
                            size="small"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="交易日期" label-width="160px">
                        <el-date-picker
                            size="small"
                            v-model="date1"
                            type="daterange"
                            range-separator="~"
                            value-format="yyyy-MM-dd"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            style="width: 100%"
                            clearable
                            @change="onClear"
                        ></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="20px">
                        <el-button
                            type="primary"
                            @click="onSearch"
                            size="small"
                        >
                            查询
                        </el-button>
                        <el-button
                            type="primary"
                            @click="onResize"
                            size="small"
                        >
                            重置
                        </el-button>
                        <el-button
                            type="primary"
                            @click="importFn"
                            size="small"
                        >
                            导入查询
                        </el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-row>
            <el-col :span="11">
                <tableList
                    ref="tableListPageRef1"
                    border
                    heightMin="200"
                    :keySet="keySet1"
                    :tableData="flowList1"
                    :paginationShow="true"
                    :pageNumber="pages.current"
                    :pageSize="pages.size"
                    :total="pages.total"
                    :pageSizes="pages.pageSizesArr"
                    @handleSizeChange="handleSizeChange"
                    @handleCurrentChange="handleCurrentChange"
                    :showSelection="true"
                    @handleSelectionChange="handleSelectionChangeLeft"
                ></tableList>
            </el-col>
            <el-col :span="2">
                <div class="centerBtn">
                    <el-button
                        @click="leftClick"
                        :disabled="
                            this.rightSelectList &&
                            this.rightSelectList.length == 0
                        "
                    >
                        <i class="el-icon-back"></i>
                    </el-button>
                    <div style="padding-top: 8px">
                        <el-button
                            @click="rightClick"
                            :disabled="
                                this.leftSelectList &&
                                this.leftSelectList.length == 0
                            "
                        >
                            <i class="el-icon-right"></i>
                        </el-button>
                    </div>
                </div>
            </el-col>
            <el-col :span="11">
                <tableList
                    ref="tableListPageRef2"
                    border
                    heightMin="200"
                    :keySet="keySet1"
                    :tableData="flowList2"
                    :paginationShow="true"
                    :pageNumber="pages2.current"
                    :pageSize="pages2.size"
                    :total="pages2.total"
                    @handleSizeChange="handleSizeChange"
                    @handleCurrentChange="handleCurrentChange"
                    :showSelection="true"
                    @handleSelectionChange="handleSelectionChangeRight"
                    :showSummary="true"
                    :summaryMethod="footerMethod"
                ></tableList>
            </el-col>
        </el-row>

        <div slot="footer" class="dialog-footer">
            <el-button
                type="primary"
                @click="save"
                size="small"
                :disabled="flowList2 && flowList2.length == 0"
            >
                确认
            </el-button>
            <el-button @click="handleClose" size="small">取消</el-button>
        </div>
        <MatchBatchImportFileXls
            ref="MatchBatchImportFileXlsRef"
            @searchCb="searchCb"
        ></MatchBatchImportFileXls>
    </el-dialog>
</template>
<script>
import tableList from '@/components/tableList/index.vue'
import MatchBatchImportFileXls from './MatchBatchImportFileXls.vue'
import {
    queryFlowByAutoOrHand,
    itemMatchFlow,
    queryFlowByItem,
} from '@/api/matchFlow.js'
export default {
    name: 'matchFlowBatchDialog',

    data() {
        return {
            leftSelectList: [],
            rightSelectList: [],
            flowList1: [
                // {
                //     ywlxbjylsm: '1',
                //     ywlxbm: 2,
                //     cpmc: 1,
                //     bqxmdm: 1,
                //     se: 1,
                // },
                // {
                //     ywlxbjylsm: '1',
                //     ywlxbm: 1,
                //     ywlxbm: 1,
                //     cpmc: 1,
                //     bqxmdm: 1,
                //     se: 1,
                // },
            ],
            flowList2: [],
            date1: ['', ''],
            formObj: {
                hprmc: this.selectRow.gmfmc, // 输入框1

                ywbh: this.selectRow.ggxh, // 输入框2, 取自规格型号
                ywdhlx: this.selectRow.ywdhlx, // 下拉框左
                tbdh: this.selectRow.ywdh, //  下拉框右
                xzdm: '',
            },
            pages: {
                current: 1,
                total: 0,
                size: 10,
                pageSizesArr: [5, 10, 15, 20],
            },
            pages2: {
                current: 1,
                total: 0,
                size: 10,
            },
            importFirstSearch: 0,

            keySet1: [
                {
                    label: '主键',
                    englishName: 'jyls',
                    sortable: true,
                },
                {
                    label: '业务编号',
                    englishName: 'jyrq',
                    sortable: true,
                },
                {
                    label: '获票人名称',
                    englishName: 'ywbh',
                    width: '150',
                    sortable: true,
                },
                {
                    label: '交易日期',
                    englishName: 'cpdm',
                    sortable: true,
                },

                {
                    label: '未开票金额',
                    englishName: 'ywlxbm',
                    sortable: true,
                    width: '150',
                },
                {
                    label: '交易金额（含税）',
                    englishName: 'cpmc',
                    sortable: true,
                    width: '150',
                },
                {
                    label: '交易金额（不含税）',
                    englishName: 'bqxmdm',
                              width: '180',
                    sortable: true,
                    
                },
                {
                    label: '税率',
                    englishName: 'bqxmmc',
                    sortable: true,
                },
                {
                    label: '税额',
                    englishName: 'se',
                    isSlot: true,
                    slotName: 'se',
                    sortable: true,
                },
                {
                    label: '纳税人识别号',
                    englishName: 'wkpje',
                    isSlot: true,
                    slotName: 'wkpje',
                    width: '150',
                    sortable: true,
                },
                {
                    label: '是否个人业务',
                    englishName: 'ysjyls',
                    width: '150',
                    sortable: true,
                },

                {
                    label: '险种代码',
                    englishName: 'jyje',
                    width: 120,
                    isSlot: true,
                    slotName: 'jyje',
                    sortable: true,
                },
                {
                    label: '险种简称',
                    englishName: 'bhsje',
                    width: 130,
                    isSlot: true,
                    slotName: 'bhsje',
                    sortable: true,
                },
                {
                    label: '险种全称',
                    englishName: 'sysl',
                    sortable: true,
                },
                {
                    label: '投保单号',
                    englishName: 'xxse',
                    isSlot: true,
                    slotName: 'xxse',
                    sortable: true,
                },
                {
                    label: '学平险受理号',
                    englishName: 'kfhm',
                    width: 150,
                    sortable: true,
                },
                {
                    label: '汇交单号',
                    englishName: 'nsrsbh',
                    width: 150,
                    sortable: true,
                },
            ],
        }
    },

    methods: {
        searchCb(arr) {
            this.flowList1 = arr
            this.pages.current = 1
            this.pages.size = arr.length
            this.pages.total = arr.length
            this.pages.pageSizesArr = [arr.length]
            this.importFirstSearch = 1
        },
        leftClick() {
            let obj = {
                applyId: this.$store.state.invoice2.invoinceFormStart1.busId,
                czlx: 1,
                iviid: this.selectRow.iviid,
                rdidList: this.rightSelectList, // left用right
            }
            itemMatchFlow(obj).then(({ code }) => {
                if (code == 200) {
                    this.onSubmit()
                }
            })
        },
        rightClick() {
            let obj = {
                applyId: this.$store.state.invoice2.invoinceFormStart1.busId,
                czlx: 0,
                iviid: this.selectRow.iviid,
                rdidList: this.leftSelectList,
            }
            itemMatchFlow(obj).then(({ code }) => {
                if (code == 200) {
                    this.onSubmit()
                }
            })
        },
        getList() {
            let obj = {
                pageNo: this.pages.current,
                pageSize: this.pages.size,

                cxlx: 1,
                jyrqq: this.date1[0],
                jyrqz: this.date1[1],

                hprmc: this.formObj.hprmc, // 1
                ywbh: this.formObj.ywbh, // 2
                // tbdh: this.formObj.tbdh, // 下拉框右
                // hjdh: this.formObj.tbdh,// 下拉框右
                // xpxslh: this.formObj.tbdh,// 下拉框右
                xzdm: this.formObj.xzdm, // 最后一个
            }
            if (this.formObj.ywdhlx == 1) {
                obj.tbdh = this.formObj.tbdh
            } else if (this.formObj.ywdhlx == 2) {
                obj.hjdh = this.formObj.tbdh
            } else if (this.formObj.ywdhlx == 3) {
                obj.xpxslh = this.formObj.tbdh
            }
            queryFlowByAutoOrHand(obj).then(({ code, data }) => {
                if (code == 200) {
                    setTimeout(() => {
                        this.flowList1 = data.records.map((item) => {
                            return {
                                ...item,
                            }
                        })
                        this.pages.current = data.current
                        this.pages.size = data.size
                        this.pages.total = data.total
                    })
                    this.$refs.tableListPageRef1.clear()
                }
            })
        },
        getList2() {
            let obj = {
                iviid: this.selectRow.iviid,
                matid: this.selectRow.matid,
                pageNo: this.pages2.current,
                pageSize: this.pages2.size,
            }
            queryFlowByItem(obj).then(({ code, data }) => {
                if (code == 200) {
                    setTimeout(() => {
                        this.flowList2 = data.records.map((item) => {
                            return {
                                ...item,
                            }
                        })
                        this.pages2.current = data.current
                        this.pages2.size = data.size
                        this.pages2.total = data.total
                    })
                    this.$refs.tableListPageRef2.clear()
                }
            })
        },

        handleCurrentChange(val) {
            this.pages.current = val
            this.getList()
        },
        handleSizeChange(val) {
            this.pages.current = 1
            this.pages.size = val
            this.getList()
        },
        footerMethod({ columns, data }) {
            // 看下data是谁
            let k = this
            const footerData = [
                columns.map((column, _columnIndex) => {
                    return null // 写的时候,把这行删除. 只是为了防止页面使用属性报错.
                    if (_columnIndex === 0) {
                        return '合计'
                    }
                    // 字段需要修改
                    if (['je', 'se'].includes(column.property)) {
                        let tmp = this.bigNumAdd(
                            data,
                            column.property
                        ).toString() //
                        let tmpNumber = String(tmp.numberStr)

                        if (column.property == 'hsje') {
                            k.totalhs = String(tmpNumber)
                            k.totalhsN = String(tmp.number)
                        }
                        if (column.property == 'bhsje') {
                            k.totalbhs = String(tmpNumber)
                            k.totalbhsN = String(tmp.number)
                        }
                        if (column.property == 'se') {
                            k.seN = String(tmp.number)
                        }

                        return tmp.numberStr
                    }
                    return null
                }),
            ]
            return footerData
        },
        handleSelectionChangeLeft(val) {
            console.log(val)
            this.leftSelectList = val.ids.map((i) => i.id)
        },
        handleSelectionChangeRight(val) {
            console.log(val)
            this.rightSelectList = val.ids.map((i) => i.id)
        },
        onClear(val, b) {
            if (val === null) {
                setTimeout(() => {
                    this.date1 = ['', '']
                }, 20)
            }
        },
        onSearch() {
            if (this.importFirstSearch === 1) {
                this.pages.current = 1
                this.pages.size = 10
                this.pages.total = 0
                this.pages.pageSizesArr = [5, 10, 15, 20]
                this.importFirstSearch = 0
            }
            if(this.formObj.tbdh || this.formObj.hprmc || this.formObj.ywbh || (this.date1[0] && this.date1[1])){
                this.onSubmit()
            }else{
                 this.$message.warning('请选择交易日期、获票人名称、投保单号/汇交单号/学平险受理号、保单号/保全号/定期结算号至少一项后在发起查询')

            }
        },
        onSubmit() {
            this.getList()
            this.getList2()
        },
        save() {
            // let p = {
            //     applyId: this.$store.state.invoice2.invoinceFormStart1.busId,
            //     czlx: 0,
            //     iviid: this.selectRow.iviid,
            //     rdidList: this.selectList,
            // }
            // itemMatchFlow(p).then(({ data, code, message }) => {
            //     console.log(data)
            //     if (code == 200) {
            //         this.$message.success(message || data)
            //         this.$emit('searchCbMatch', false)
            //     }
            // })
            this.handleClose()
        },
        onResize() {
            this.date1 = ['', '']
            this.formObj = {
                hprmc: '',
                tbdh: this.selectRow.ywdh,
                ywdhlx: this.selectRow.ywdhlx, // 业务单号类型
                xzdm: '',
            }
        },
        importFn() {
            this.$refs.MatchBatchImportFileXlsRef.show()
        },
        handleClose() {
            this.$emit('change', false)
        },

        handlePageSizeChange(val) {
            this.pages.current = 1
            this.pages.size = val
        },
        handlePageCurrentChange(val) {
            this.pages.current = val
        },
        resetParams() {
            this.leftSelectList = []
            this.rightSelectList = []
            this.flowList1 = []
            this.flowList2 = []
            this.formObj = {
                hprmc: this.selectRow.gmfmc, // 输入框1

                ywbh: this.selectRow.ggxh, // 输入框2, 取自规格型号
                ywdhlx: this.selectRow.ywdhlx, // 下拉框左
                tbdh: this.selectRow.ywdh, //  下拉框右
                xzdm: '',
            }
            this.date1 = ['', '']

            // this.selectList = []
            this.pages = {
                current: 1,
                total: 0,
                size: 10,
            }
            this.pages2 = {
                current: 1,
                total: 0,
                size: 10,
            }
        },
    },
    components: {
        tableList,
        MatchBatchImportFileXls,
    },
    model: {
        prop: 'dialogShow',
        event: 'change',
    },
    props: {
        dialogShow: {
            type: Boolean,
            default: false,
        },
        selectRow: {
            type: Object,
            default: () => {},
        },
    },
    watch: {
        dialogShow(newV) {
            if (newV) {
                this.resetParams()
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.centerBtn {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
::v-deep .el-dialog_wrapper .dialog-fade-leave-active {
    animation-fill-mode: forwards;
}

::v-deep .el-dialog__body {
    padding: 0 20px 10px !important;
    max-height: 100% !important;
}
::v-deep .el-dialog {
    margin-top: 0px !important;
}

::v-deep .el-row {
    margin-bottom: 12px;
}
</style>

<style lang='scss'>
@media (max-height: 850px) and (min-height: 500px) {
    // .el-dialog{
    //     margin-top: 7vh !important;
    // }
    .el-dialog {
        margin-top: 4vh !important;
    }
    .el-dialog__body {
        max-height: 80vh !important;
    }
}
@media (max-height: 3600px) and (min-height: 850px) {
    .el-dialog {
        margin-top: 15vh !important;
    }
}
</style>